<template>
	<view>
		<view class="bg">
			<image src="../static/images/provider_bg.png" mode=""></image>
		</view>
		<view class="content-box">
			<view class="list">
				<view class="title">
					请填写申请信息
				</view>
				<view class="acea-row row-middle item">
					<view class="label">商家名称</view>
					<input type="text" placeholder="请输入商家名称" v-model="dataForm.name" placeholder-class="placeholder-class">
				</view>
				<view class="acea-row row-middle item">
					<view class="label">营业执照</view>
					<input type="text" placeholder="请输入营业执照号码" v-model="dataForm.businessNum" placeholder-class="placeholder-class">
				</view>
				<view class="acea-row row-middle item">
					<view class="label">主营业务</view>
					<input type="text" placeholder="请输入主营业务" v-model="dataForm.business" placeholder-class="placeholder-class">
				</view>
				<view class="acea-row  row-middle row-between item">
					<text class="item-name label">商户类型 </text>
					<picker  @change="bindPickerChange1" :value="index1" :range="merchantType" range-key="name" style="width: 73%;">									
						<view  class="acea-row  row-left">
							<input placeholder="请选择商户类型" type="text" readonly disabled v-model="merchantTypeName" placeholder-class="placeholder-class">
							<!-- <view class='iconfont icon-xiangyou'></view> -->
						</view>
					</picker>
				</view>
				<!-- 营业执照照片 -->
				<view class="module">
					<view class="acea-row row-middle row-between">
						<view class="module-title">
							上传执照照片
						</view>
						<view class="example-text">
							图片示例
						</view>
					</view>
					<view class="example-text-l">
						请至少添加一张正面照，图片越多审核越快
					</view>
					<view class="acea-row pictrue-list">
						<view class="acea-row row-column row-center-wrapper pictrue" v-for="(item,index) in dataForm.qualificationPicture" :key="index" @click="selectPicture(index)">
							<view class="upload-icon">
								<image :src="item?item:'../static/images/upload_icon.png'" mode=""></image>
							</view>
							<view v-if="!item">上传照片</view>
						</view>
		<!-- 				<view class="acea-row row-column row-center-wrapper pictrue">
							<view class="upload-icon">
								<image src="../static/images/upload_icon.png" mode=""></image>
							</view>
							<view>上传照片</view>
						</view> -->
					</view>
				</view>
				<view class="acea-row row-middle item">
					<view class="label">法人姓名</view>
					<input type="text" placeholder="请输入法人姓名" v-model="dataForm.realName" placeholder-class="placeholder-class">
				</view>
				<view class="acea-row row-middle item">
					<view class="label">负责人电话</view>
					<input type="text" placeholder="请输入负责人电话" v-model="dataForm.phone" placeholder-class="placeholder-class">
				</view>
				<view class="acea-row row-middle row-between item address">
					<view class="acea-row row-middle">
						<view class="label">公司地址</view>
						<input type="text" placeholder="请输入/选择公司地址" v-model="dataForm.address" placeholder-class="placeholder-class">
					</view>
					<image src="../static/images/location.png" mode="" @click="chooseLocation"></image>
				</view>
			</view>
			<view class="submit-btn" @click="confirmServicer">
				立即申请
			</view>
			<view class="uni-p-b-98"></view>
		</view>
	</view>
</template>

<script>
	import {
		getMerTypeListApi
	} from "@/api/merchant.js";
	import {
		getMerSettledApplyApi
	} from '@/api/merchant.js'
	export default {
		data() {
			return {
				dataForm:{
					name:'',//商家名称
					businessNum:'',//营业执照号码
					business:'',//主营业务
					qualificationPicture:['',''],
					realName:'',//法人姓名
					phone:'',//负责人电话
					address:'',//公司地址
					categoryId: '-1',
					handlingFee:'0',
					typeId:''
				},
				merchantType:[],
				index1: 0,
				merchantTypeName: '',
				rules:[{
						filed: 'name',
						tip: '请输入商家名称'
				},{
					filed: 'businessNum',
					tip: '请输入营业执照号码',
				},{
					filed: 'business',
					tip: '请输入主营业务',
				},{
						filed: 'qualificationPicture',
						tip: '请上传营业执照照片',
						isNotNull: true
				},{
					filed: 'realName',
					tip: '请输入法人姓名',
				},{
					filed: 'phone',
					tip: '请输入负责人电话',
				},{
					filed: 'address',
					tip: '请选则公司地址',
				}]
			}
		},
		onLoad() {
				this.getMerchantType();
		},
		methods: {
			//选择地址
			chooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.dataForm.address = res.address+res.name;
					},
					fail(e) {
						console.log(e)
					}
				})
			},
			//上传图片
			selectPicture(ind) {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					count: 5,
					name: 'multipart',
					model: "user",
					pid: 0,
				}, function(res) {
					that.dataForm.qualificationPicture[ind] = res.data.url;
					that.dataForm.qualificationPicture = JSON.parse(JSON.stringify(that.dataForm.qualificationPicture))
				});
			},
			confirmServicer(){
				let valite =this.$util.customValidation(this.dataForm,this.rules)
				if(!valite){
					return;
				}
				let d = JSON.parse(JSON.stringify(this.dataForm))
				d.qualificationPicture = d.qualificationPicture.join(',');
				getMerSettledApplyApi(d).then(res=>{
					if(res.code == 200){
						this.$util.Tips({
							title:'申请成功',
							},{
								tab: 3
							})
					}
				}).catch(e=>{
					this.$util.Tips({
						title:e
					})
				})
			},
			bindPickerChange1: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index1 = e.target.value
				let idx = e.target.value
				console.log(this.merchantType[idx])
				if(this.merchantType[idx]) {
					this.dataForm.typeId = this.merchantType[idx]['id']
					this.merchantTypeName = this.merchantType[idx]['name']
					this.merchantTypeInfo = this.merchantType[idx]['info']
				}
			},
			getMerchantType(){
				getMerTypeListApi().then(res=>{
					this.merchantType = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
.bg{
	width: 100%;
	height: 312rpx;
	image{
		width: 100%;
		height: 100%;
	}
}
.content-box{
	position: absolute;
	top: 270rpx;
	left: 30rpx;
	right: 30rpx;
}
.placeholder-class{
	font-size: 24rpx;
	font-weight: 400;
	color: rgba(213, 213, 213, 1);
}
.list{
	
	// margin: -30rpx 30rpx 0;
	background: #ffffff;
	border-radius: 10rpx;
	padding: 30rpx;
	.title{
		padding-left: 12rpx;
		border-left: 8rpx solid rgba(238, 33, 45, 1);
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin: 36rpx 0;
	}
	.item{
		padding: 30rpx;
		border-radius: 6rpx;
		background: rgba(248, 248, 248, 1);
		margin-bottom: 24rpx;
	}
	.label{
		width: 152rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}
	input{
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(56, 56, 56, 1);
	}
	.address{
		image{
			width: 26rpx;
			height: 26rpx;
		}
	}
}

 .module {
		padding: 32rpx 0;
	}
	 .module .module-title{
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}
	
	.example-text{
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(128, 128, 128, 1);
	}
	.example-text-l{
		font-size: 24rpx;
		font-weight: 400;
		padding: 24rpx 0;
		color: rgba(166, 166, 166, 1);
	}
	
	.pictrue-list {
		/* padding: 30rpx 0; */
	}
	.pictrue-list .pictrue{
		width: 218rpx;
		height: 172rpx;
		border-radius: 4rpx;
		background: rgba(247, 247, 247, 1);
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(166, 166, 166, 1);
		margin-bottom: 24rpx;
	}
	.pictrue-list .pictrue:nth-child(3n-1){
		margin: 0 18rpx;
	}
	.pictrue-list .pictrue .upload-icon{
		width: 76rpx;
		height: 76rpx;
	}
	.pictrue-list .pictrue .upload-icon image{
		width: 76rpx;
		height: 76rpx;
	}

.submit-btn{
	width: 716rpx;
	height: 96rpx;
	line-height: 96rpx;
	text-align: center;
	border-radius: 50rpx;
	background: rgba(238, 33, 45, 1);
	box-shadow: 0px 6rpx 12rpx 0px rgba(0, 0, 0, 0.16);
	font-size: 36rpx;
	font-weight: 400;
	color: rgba(255, 250, 250, 1);
	margin: 42rpx auto;
}
</style>
